<template>
	<div class="articledetail conbox designs clearfloat">
		<scroll-view :scroll-y="true" @scroll="handleScroll" style="height: 100vh;">
			<div class="back" v-show="headstatus || navFixed" @click="backFn()">
				<img :src="constant.imgUrl +'design/caseback.png'" alt />
			</div>
			<!-- div class="go_share" @click="goShare()" v-if="$util.shieldReview() && headstatus">
				<img :src="`${constant.imgUrl}common/share_icon.png`" alt />
			</!-->
			<div class="article_detail">
				<div class="artile_content">
					<p class="atricle_title">{{ article_title }}</p>
					<!-- 名片 - start -->
					<div class="card_content box_shadow_body">
						<div class="card_attr">
							<img :src="`${user_picture}?x-oss-process=image/resize,m_fill,h_165,w_165`" alt />
						</div>
						<div class="card_user_info">
							<div class="card_info">
								<div class="card_info_name ellipsis_line_com">{{ user_name }}</div>
								<div class="card_tag">
									<span>{{ address }}&nbsp;｜&nbsp;{{ rolename }}</span>
								</div>
							</div>
							<div class="text_sub_com" v-if="false">——</div>
							<!-- div>
								<span class="text_sub_com">微信</span>
								<span>{{ userInfo.owner_user_wechat }}</span>
							</div> -->
							<div>
								<span class="text_sub_com">电话</span>
								<span>{{ userInfo.owner_user_phone }}</span>
							</div>
							<div>
								<span class="text_sub_com">地址</span>
								<span class="address_text">{{ userInfo.owner_user_address }}</span>
							</div>
						</div>
					</div>
					<!-- 名片 -end -->
					<div class="articletop">
						<div class="person_left">
							<div class="personal_flow">
								<div class="userimg">
									<img v-for="(item,index) in fansData.data" :src="item.share_user_picture" alt class="imgs" v-if="index<4" :Key="index" />
									<img :src="`${constant.imgUrl}design/more.png`" alt />
								</div>
								<div class="browse">
									<span>{{ fansData.total }}</span>
									<em class="brow">粉丝</em>
									<!-- <em class="popularity">人气</em> -->
								</div>
							</div>
						</div>
						<!-- <router-link :to="{name:'Index',params:{actives:active}}"></router-link>-->
						<div class="person_right" @click="mainpage()">主页</div>
					</div>
					<!--<div v-html="{{content}}"></div>-->
					<div class="includecontent ql-container ql-snow" ref="includecontent">
						<div class="ql-editor" v-html="content" />
					</div>
					<!--  <p class="atrice_imgdesic">对于习惯了传统电视的大部分人来说，这款全新的电视机更像是一个“新物种”。浮窗全场景TV是XESS针对家居美学交出的一份革命性解决方案，展示了在现代科技的发展下，
						  电视机如何更完美、灵活地融入到家居生活环境中。相比起传统的电视机，浮窗全场景TV在以下的三大方面进行创新式突破。</p>
						<div class="atricle_img">
							<img src="" alt="">
						</div>
					<p class="atrice_imgdesic">对于习惯了传统电视的大部分人来说，这款全新的电视机更像是一个“新物种”。浮窗全场景TV是XESS针对家居美学交出的一份革命性解决方案，展示了在现代科技的发展下，电视机如何更完美、灵活地融入到家居生活环境中。相比起传统的电视机，浮窗全场景TV在以下的三大方面进行创新式突破。</p>-->
					<!--<div class="article_offer" v-if="userInfo.owner_user_role_id != 2">
						<p>
							—
							<span class="estimate">10秒估算</span>
							<span class="regain">2020最新装修报价</span> —
						</p>
						<div class="atric_form">
							<div class="radiom">
								<div class="radiom_nei">
									<img :src="`${constant.imgUrl}design/radom.gif`" alt />
								</div>
							</div>
							<div class="atric_input">
								<input placeholder="请输入房屋面积" type="number" v-model="area" />
								<span>m²</span>
							</div>
							<div class="atric_input">
								<input placeholder="请输入手机号码" v-model="mobile" type="number" />
							</div>
							<div class="artic_sub" @click="subform()">
								<img :src="`${constant.imgUrl}design/free_offer.gif`" alt />
							</div>
						</div>
					</div>-->
				</div>
				<!-- <div class="linediv" v-show="hide_recom"></div> -->
				<div class="artic_recommend" v-if="recommendList.length > 0">
					<p class="recom_title">
						—
						<span>相关推荐</span> —
					</p>
					<ul>
						<li class="recomd_li" v-for="(item,index) in recommendList" :key="index" @click="toArticleDet(item.article_relevance_id)">
							<!-- <p class="diff_title">{{item.title}}</p> -->
							<div class="recomd_btom">
								<div class="recomdbt_left">
									<div class="recomdesc">
										<p class="ellipsis_line_com">{{ item.title }}</p>
									</div>
									<p class="looks" v-show="show_view">
										<span class="recomd_li_tag">{{ item.cat_name }}</span>
										<span>
											<img :src="`${constant.imgUrl}design/look.png`" alt class="eye" />
											{{ item.view_num }}
										</span>

										<span>
											<img :src="`${constant.imgUrl}design/fabulous.png`" alt class="fabulous" />
											{{ item.share_num }}
										</span>
									</p>
								</div>
								<div class="recomdbt_right">
									<img :src="item.cover_img" alt="图片" />
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</scroll-view>
		<option-btn v-if="isSelf && $util.shieldReview()" @toMaterialList="toMaterialList" @pushIteam="pushIteam" @popularize="goShare" />
		<footer class="casede_fooetr" v-else>
			<v-normalFooter ref="normalFooter" :is-show-attr="true" />
		</footer>
		<v-sharePoster ref="sharePoster" :type="3" />
	</div>
</template>
<script>
import { share } from '@/mixins'
import { mobileReg } from '@/utils/tools/validate'
import { getSpreadIndex } from '@/utils/common'

import NormalFooter from '@/pages/components/normalFooter'
import OptionBtn from '@/pages/components/optionBtn'

import SharePoster from '@/pages/components/sharePoster'

import { submitReservation } from '@/api/shop'
import { zxglGetdetail } from '@/api/getGuest'
import { sendShare, shareStatisc, sendVisitors } from '@/api/buriedPoint'
import { getbehavior } from '@/api/common'
import AppUserAttr from '@/pages/components/appUserAttr'

export default {
	name: 'articledetail',
	mixins: [share],
	components: {
		'v-normalFooter': NormalFooter,
		'v-sharePoster': SharePoster,
		OptionBtn,
		AppUserAttr
	},
	data() {
		return {
			constant: this.$constant,
			sharePosterType: 3,
			mobile: '',
			area: '',
			active: 1,
			gobackt: '',
			articleid: '',
			detaillist: '',
			view_num: '',
			share_num: '',
			show_view: true,
			user_picture: '',
			user_name: '',
			address: '',
			rolename: '',
			content: '',
			article_title: '',
			hide_recom: true,
			userid: '',
			owner_user_id: '',
			contents: '',
			headstatus: true,
			userInfo: {},
			recommendList: [],
			scrollTop: 0,
			fansData: {
				data: [],
				total: 0
			},
			title: '',
			cover_img: '',
			description: ''
		}
	},
	onLoad(option) {
		this.option = option
		this.gobackt = option.gobackt
		this.articleid = option.articleid
		this.owner_user_id = option.owner_user_id
		this.getdetail()
		let that = this
		if (this.gobackt == 'editstra') {
			this.sharePosterType = 8
		}
		setTimeout(() => {
			that.shareweixin()
			that.sendtranck()
		}, 2000)

		this.$eventBus.$on('BusOnlineSign', data => {
			let currentPoint = JSON.parse(uni.getStorageSync('currentPoint'))
			if (currentPoint.realName == 'Articledetai') {
				sendVisitors({ relevance_id: this.option.articleid, resource_type: 'zxgl_detail' })
			}
		})
	},
	onUnload() {
		this.$eventBus.$off('BusOnlineSign')
	},
	computed: {
		isSelf() {
			let selfUserId = uni.getStorageSync('user_id')
			return this.owner_user_id == selfUserId
		}
	},
	methods: {
		// 滚动监听
		handleScroll(e) {
			let scroll = e.detail.scrollTop
			this.headstatus = scroll <= 100
		},
		// 返回
		backFn() {
			const pages = getCurrentPages()
			console.log(pages)
			if (pages.length < 2) {
				let url = getSpreadIndex()
				let query = {
					owner_user_id: this.option.owner_user_id
				}
				uni.navigateTo({
					url: `${url}${this.commonJS.queryData(query)}`
				})
			} else {
				uni.navigateBack()
			}
		},
		// 跳到主页
		mainpage() {
			// 主页
			let userid = this.owner_user_id
			let gobacktype = this.gobackt
			let localuserid = uni.getStorageSync('user_id')
			// let url = this.userInfo.owner_user_role_id > 2 ? `/pages/design/designerIndex` : `/pages/design/designCompany/indexNew`
			let url = getSpreadIndex()
			if (gobacktype == 'normal') {
				let query = {
					owner_user_id: this.option.owner_user_id,
					active: 1
				}
				uni.navigateTo({
					url: `${url}${this.commonJS.queryData(query)}`
				})
			} else if (gobacktype == 'norm_user') {
				let query = {
					owner_user_id: this.option.owner_user_id,
					active: 1
				}
				uni.navigateTo({
					url: `${url}${this.commonJS.queryData(query)}`
				})
			} else if (gobacktype == 'editstra') {
				if (userid !== localuserid) {
					let query = {
						owner_user_id: this.option.owner_user_id,
						active: 1
					}
					uni.navigateTo({
						url: `${url}${this.commonJS.queryData(query)}`
					})
				} else {
					let query = {
						owner_user_id: this.option.owner_user_id,
						active: 1
					}
					uni.navigateTo({
						url: `${url}${this.commonJS.queryData(query)}`
					})
				}
			} else if (gobacktype == 'shoparticle') {
				if (userid !== localuserid) {
					let query = {
						owner_user_id: this.option.owner_user_id
					}
					uni.navigateTo({
						url: `${url}${this.commonJS.queryData(query)}`
					})
				} else {
					let query = {
						owner_user_id: this.option.owner_user_id
					}
					uni.navigateTo({
						url: `${url}${this.commonJS.queryData(query)}`
					})
				}
			} else {
				let query = {
					owner_user_id: this.option.owner_user_id
				}
				uni.navigateTo({
					url: `${url}${this.commonJS.queryData(query)}`
				})
			}
		},
		// 推荐详情
		toArticleDet(id) {
			let query = {
				owner_user_id: this.option.owner_user_id,
				active: 1,
				gobackt: this.gobackt,
				articleid: id
			}
			uni.navigateTo({
				url: `pages/getGuest/articledetail${this.commonJS.queryData(query)}`
			})
			this.articleid = id
			this.getdetail()
		},
		// 攻略详情
		getdetail() {
			uni.showLoading({
				title: '',
				mask: true
			})
			let articleid = this.articleid
			let gobacktype = this.gobackt
			let data = ''
			if ((articleid == '' || articleid == 'null') && this.option.mainId !== '') {
				data = {
					owner_user_id: this.option.owner_user_id,
					id: this.option.mainId
				}
			} else if ((this.option.mainId == '' || this.option.mainId == 'null') && articleid !== '') {
				data = {
					article_relevance_id: articleid,
					owner_user_id: this.option.owner_user_id
				}
			} else if (this.option.mainId !== '' && articleid !== '') {
				data = {
					article_relevance_id: articleid,
					owner_user_id: this.option.owner_user_id,
					id: this.option.mainId
				}
			}
			zxglGetdetail(data).then(response => {
				if (response.status == 'success') {
					let detaillist = response.data
					let attrImgArr = []
					this.detaillist = detaillist
					this.userInfo = detaillist.owner_user_info

					for (let i in detaillist.fans_data.data) {
						let obj = {
							share_user_picture: detaillist.fans_data.data[i].user_picture
						}
						attrImgArr.push(obj)
					}

					this.fansData.data = attrImgArr
					this.fansData.total = detaillist.fans_data.total

					if (detaillist.recommend_list) {
						this.recommendList = detaillist.recommend_list.list
					}
					this.user_picture = detaillist.owner_user_info.owner_user_picture
					this.user_name = detaillist.owner_user_info.owner_user_name
					this.address = detaillist.owner_user_info.owner_user_region_name
					this.rolename = detaillist.owner_user_info.owner_user_role_name
					this.content = detaillist.article_info.content ? detaillist.article_info.content.replace(/<section/g, '<div').replace(/\/section>/g, '/div>') : ''
					this.contents = detaillist.article_info
					this.article_title = detaillist.article_info.title
					this.description = detaillist.article_info.description
					this.cover_img = detaillist.article_info.cover_img
					if (gobacktype == 'normal') {
						this.show_view = true
						this.view_num = detaillist.article_info ? detaillist.article_info.view_num : 0
						this.share_num = detaillist.article_info ? detaillist.article_info.share_num : 0
					} else if (gobacktype == 'editstra') {
						this.show_view = false
					}
				} else {
					this.$toast(response.errors.message)
				}
				uni.hideLoading()
			})
		},
		// 自定义分享
		shareweixin() {
			let gobacktype = this.gobackt
			let links = `/pages/getGuest/articledetail`
			let url = ''
			let roleid = this.roleid
			let owner_user_id = this.option.owner_user_id
			let puser_id = this.option.share_user_id
			let title = this.article_title
			let mainid = this.option.mainId
			let imgurl = this.cover_img
			let desc = this.description
			let userid = uni.getStorageSync('user_id')
			if (userid == owner_user_id) {
				url = `${this.$constant.formal}/hkds/#${links}?owner_user_id=${this.owner_user_id}&` + `articleid=${this.articleid}&` + `gobackt=${this.gobackt}&` + `share_user_id=${this.owner_user_id}&` + `mainId=${mainid}`
			} else {
				url = `${this.$constant.formal}/hkds/#${links}?owner_user_id=${this.owner_user_id}&` + `articleid=${this.articleid}&` + `gobackt=${this.gobackt}&` + `share_user_id=${userid}&` + `p_share_user_id=${puser_id}&` + `mainId=${mainid}`
			}

			let params = {
				url,
				path: url,
				title, // 分享标题
				desc, // 分享内容
				imgUrl: imgurl,
				owner_user_id,
				puser_id
			}
			this.jweixinFn(params)
		},
		// 行为轨迹埋点记录接口
		sendtranck() {
			let owner_user_id = this.owner_user_id
			let puser_id = this.option.share_user_id
			let img = []
			// #ifdef H5
			let ps = this.$refs.includecontent.getElementsByTagName('p')
			if (ps.length) {
				for (let i = 0; i < ps.length; i++) {
					let firstimg = ps[i].getElementsByTagName('img')[0]
					if (firstimg) {
						img.push(firstimg)
					}
				}
			}
			// #endif
			var imgurl = ''
			if (img[0] == undefined) {
				imgurl = this.user_picture
			} else {
				imgurl = img[0].currentSrc
			}
			let userid = uni.getStorageSync('user_id')
			let articleid = this.articleid
			let multi_type = ''
			let multi_id = ''
			if ((articleid == '' || articleid == 'null') && this.option.mainId !== '') {
				multi_type = 'p_zxgl_detail'
				multi_id = this.option.mainId
			} else {
				multi_type = 'zxgl_detail'
				multi_id = this.articleid
			}
			let data = {
				owner_user_id: owner_user_id,
				share_user_id: '',
				path: 'apihkds/api/zxgl/getdetail',
				referer: location ? location.href : this.$constant.formal,
				traceType: 1,
				multi_type: multi_type,
				multi_id: multi_id,
				title: this.article_title,
				picture: imgurl
			}
			if (userid == owner_user_id) {
				data.share_user_id = owner_user_id
			} else {
				data.p_share_user_id = puser_id
				data.share_user_id = userid
			}
			getbehavior(data).then(res => {
				if (res.status === 'success') {
				} else {
				}
			})
		},
		// 装修报价
		subform() {
			let area = this.area
			let mobile = this.mobile
			let userid = this.owner_user_id
			if (area == '') {
				this.$toast('请填写面积！')
			} else if (mobile.length == 0) {
				this.$toast('请输入手机号码！')
			} else if (mobile.length !== 11) {
				this.$toast('请输入完整的手机号码！')
			} else if (!mobileReg.test(mobile)) {
				this.$toast('请输入正确的手机号码！')
			} else {
				let params = {
					mobile_phone: this.mobile,
					square: this.area,
					owner_user_id: userid,
					prebook_source: '文章详情'
				}
				//  params.append('mobiles', this.phones)
				submitReservation(params).then(response => {
					if (response.status == 'success') {
						this.$toast(response.data)
					} else {
						this.$toast(response.errors.message)
					}
				})
			}
			console.log(this.mobile)
		},
		// 朋友圈推广
		toMaterialList(data, type) {
			let params = {
				relevance_id: this.detaillist.article_info.article_id,
				case_article_id: this.detaillist.article_info.article_id,
				resource_type: 1,
				imgUrl: this.cover_img,
				cat_name: this.detaillist.article_info.cat_name || '',
				from: 'caseOrArticle',
				id: this.detaillist.article_info.article_id,
				images: this.cover_img,
				title: this.detaillist.article_info.title,
				extension_num: this.detaillist.article_info.extension_num,
				huoke_num: this.detaillist.article_info.huoke_num
			}
			uni.navigateTo({
				url: `/pages/getGuest/shareList${this.commonJS.queryData(params)}`
			})
		},
		// 推给团队
		pushIteam(data, type) {
			let params = {
				status: this.detaillist.article_info.cat_name || '',
				imgUrl: this.cover_img,
				type: 1,
				from_origin: 1,
				id: this.detaillist.article_info.article_id,
				images: this.cover_img,
				title: this.detaillist.article_info.title,
				extension_num: this.detaillist.article_info.extension_num,
				huoke_num: this.detaillist.article_info.huoke_num
			}

			uni.navigateTo({
				url: `/pages/getGuest/pushTeam${this.commonJS.queryData(params)}`
			})
		},
		// 分享海报图
		async goShare() {
			let data = {
				id: this.detaillist.article_info.article_id
			}
			let resData = await this.$refs.sharePoster.showMask(data)

			if (typeof resData === 'string') { // 获取失败
				return false
			}
			let userInfo = this.$store.state.user.user
			let relevance_id = resData.relevance_id

			await getbehavior({
				traceType: 3,
				owner_user_id: this.option.owner_user_id,
				share_user_id: userInfo ? userInfo.user_id : 'null',
				multi_id: relevance_id,
				multi_type: 'zxgl_detail'
			})
			await sendShare({ relevance_id, resource_type: 'zxgl_detail' })
		}
	}
}
</script>

<style lang="scss" scoped>
	.ql-container {
		height: auto !important;
	}

	.articledetail .back {
		width: 60px;
		height: 60px;
		position: fixed;
		left: 5%;
		top: 25px;
		opacity: 0.7;
		float: left;
		z-index: 99;
	}

	.articledetail .back img {
		width: 60px;
		height: 60px;
		float: left;
	}
	.articledetail {
		height: 100vh;
		overflow: hidden;

		.article_detail {
			padding-bottom: 200px;
		}
		.atricle_title {
			margin: 20upx;
			font-size: 40px;
			text-align: left;
			font-weight: bold;
			line-height: 60px;
		}

		.card_content {
			margin-left: 5%;
			justify-content: center;
			text-align: left;
			background-color: #f5f5f5;
			border-radius: 20px;
			display: flex;
			align-items: center;
			padding: 10px;
			box-sizing: border-box;
			margin:30px;

			.card_user_info {
				width: calc(100% - 140px);
				margin-left: 50px;

				.text_sub_com {
					margin-right: 8px;
					line-height: 1.2;
				}
				.address_text {
					line-height: 1.4;
				}

				.card_info {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.card_tag {
					}
				}

				.card_info_name {
					max-width: calc(100% - 152px);
					font-size: 30px;
					flex-shrink: 0;
				}

				& > div {
					margin: 14px 0;
				}
			}

			.card_attr {
				width: 120px;
				height: 120px;
				// background: #ccc;
				border-radius: 50%;

				img {
					width: 120px;
					height: 120px;
					margin-left:10px;
					border-radius: 50%;
					display: flex;
					align-items: center;
				}
			}
		}

		.articletop {
			margin: 40upx 0;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.person_left {
				width: calc(100% - 250upx);
				.personal_flow {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-left: 10px;
					.userimg img {
						width: 54upx;
						height: 54upx;
						margin-right: 8px;
						border: 2upx solid #ccc;
						border-radius: 50%;
					}
					.browse {
						font-size: 40upx;
						font-weight: 700;
						display: flex;
						align-items: center;
						em {
							tab-index: 4upx;
							color: #999;
							font-size: 24upx;
						}
						.brow {
							margin-right: 10px;
						}
					}
				}
			}
			.person_right {
				width: 130px;
				height: 60px;
				background: #ffd11a;
				border-radius: 60px;
				text-align: center;
				line-height: 60px;
			}
		}

		.includecontent {
			width: 90%;
			margin-left: 5%;
			font-family: 微软雅黑;
			font-size: 26px;
			line-height:40upx;
		}

		.article_offer {
			width: 90%;
			height: auto;
			margin: 0 auto;
			padding: 20px 0;
			box-shadow: 0.013333rem 0.026667rem 0.24rem rgba(101, 101, 101, 0.17);
			p {
				text-align: center;
				font-size: 38upx;
				color: rgb(221, 221, 221);
				margin-top: 20px;
				.estimate {
					color: black;
				}
				.regain {
					color: rgb(255, 144, 0);
				}
			}
			.atric_form {
				width: 100%;
				padding: 5%;
				height: auto;
				.radiom {
					width: 90%;
					height: 120upx;
					background: #e7e7e7;
					border-radius: 15upx;
					.radiom_nei {
						width: 100%;
						height: 120upx;
						background: #d3d3cb;
						margin: 1.8% 0 0 1.8%;
						border-radius: 15upx;
						float: left;
						img {
							width: 254px;
							height: 74px;
							margin: 26px;
							float: right;
						}
					}
				}
				.atric_input {
					width: 90%;
					height: 94upx;
					background: #f5f5f5;
					font-size: 30upx;
					line-height: 30upx;
					color: #c9c9c9;
					border: 0.026667rem solid rgb(204, 204, 204);
					margin-top: 20upx;
					border-radius: 12upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					input {
						flex: 1;
						height: 80%;
						margin: 0 10upx;
						border: none;
						background: #f5f5f5;
						text-indent: 10upx;
						color: rgb(153, 153, 153);
					}
					span {
						float: right;
						margin-right: 20upx;
						color: black;
					}
				}
				.artic_sub {
					margin-top: 40px 0;
					width: 90%;
					height: 120px;
				}

				.artic_sub img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.artic_recommend {
		width: 90%;
		margin-left: 5%;
		margin-top: 40px;

		.recom_title {
			text-align: center;
			color: rgb(221, 221, 221);
			font-size: 35px;
			span {
				color: black;
			}
		}

		ul {
			width: 100%;
			li {
				width: 100%;
				height: 266px;
				margin-top: 40px;

				:first-child {
					margin-top: 0;
				}

				&.recomd_li .diff_title {
					font-size: 0.453333rem;
					color: rgb(51, 51, 51);
					text-align: left;
				}

				.recomd_btom {
					width: 100%;
					height: 170px;
					margin-top: 10px;
					display: flex;
					.recomdbt_left {
						flex: 1;
						height: 100%;
						float: left;
						font-size: 30upx;
						color: rgb(153, 153, 153);

						.recomdesc {
							display: -webkit-box;
							word-break: break-all;
							/*! autoprefixer: off */
							-webkit-box-orient: vertical;
							/* autoprefixer: on */
							-webkit-line-clamp: 3;
							margin-bottom: 50px;
							/*overflow: hidden;*/
							text-overflow: ellipsis;
							color: #333;
							font-size: 35upx;
						}

						.looks {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-right: 30px;
							.recomd_li_tag {
								padding: 4px 8px;
								display: inline-block;
								border: 1upx solid #ddd;
								border-radius: 2px;
								font-size: 24upx;
							}
							span {
								.eye {
									width: 35px;
									height: 35px;
								}
								.fabulous {
									width: 35px;
									height: 35px;
								}
							}
						}
					}
					.recomdbt_right {
						border-radius: 12px;
						background: #2d93ca;
						img {
							width: 240px;
							height: auto;
							float: left;
						}
					}
				}
			}
		}
	}
</style>
